// 导入变量
@use "_variables.scss" as *;

// 混合器 - 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 混合器 - 盒子阴影
@mixin box-shadow($shadow: $shadow-md) {
  box-shadow: $shadow;
}

// 混合器 - 圆角
@mixin border-radius($radius: $border-radius-md) {
  border-radius: $radius;
}

// 混合器 - 过渡效果
@mixin transition($property: all, $duration: $transition-normal) {
  transition: $property $duration;
}

// 混合器 - 媒体查询
@mixin responsive($breakpoint) {
  @if $breakpoint == sm {
    @media (max-width: 576px) { @content; }
  }
  @else if $breakpoint == md {
    @media (max-width: 768px) { @content; }
  }
  @else if $breakpoint == lg {
    @media (max-width: 992px) { @content; }
  }
  @else if $breakpoint == xl {
    @media (max-width: 1200px) { @content; }
  }
}